<template>
	<view class="content" :class="{hide:hide==true}">
		<view>
			<view class="title titlebox">
				<text @click="showtitle=true">{{title}}</text>
				<view class="titleclose" @click="showdel=true">x</view>
			</view>
		</view>
		<view class="items">
			<view class="box" v-for="(item,index) in sizes">
				<view :class="{on:activeindex==index}" class="item" @click="selitem(item)">
					<view class="name">{{item.name}}</view>
					<view class="close" @click="confimdelsize(item)">x</view>
				</view>
			</view>
			<view class="box">
				<view class="item">
					<view class="name" @click="showsize=true">+添加+</view>
				</view>
			</view>
		</view>
		<view class="clear"></view>
		<u-modal v-model="showsize" title="请输入规格名称" @confirm="confirmsize">
			<view class="inputsize">
				<u-input type="textarea" v-model="txt" placeholder="请输入规格" height="80" :auto-height="true" />
			</view>
		</u-modal>
		<u-modal v-model="showtitle" title="请输入型号名称" @confirm="confirmtitle">
			<view class="inputsize">
				<u-input type="textarea" v-model="inputtitle" placeholder="请输入型号名称" height="80" :auto-height="true" />
			</view>
		</u-modal>
		<u-modal v-model="showdeltip" :show-cancel-button="true" @confirm="delsize" content="你确定要删除吗?"></u-modal>
		<u-modal v-model="showdel" :show-cancel-button="true" @confirm="delthis" content="你确定要删除整个规格吗?"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '型号号型号',
				sizes: [{
						name: '19G'
					},
					{
						name: '29G'
					},
					{
						name: '49G'
					}
				],
				showtitle: false,
				showsize: false,
				showdeltip: false,
				showdel: false,
				txt: '',
				inputtitle: '',
				delitem: {},
				hide: false,
				activeindex: -1
			};
		},
		mounted() {
			this.inputtitle = this.title
			this.sizes.forEach(i => {
				i.active = false
			})
		},
		methods: {
			confirmsize() {
				if (this.txt.length > 0) {
					this.sizes.push({
						name: this.txt
					})
					this.txt = ""
				}
			},
			confirmtitle() {
				if (this.inputtitle.length > 0) {
					this.title = this.inputtitle
				}
			},
			selitem(item) {
				this.sizes.forEach(i => {
					i.active = false
				})
				item.active = true
				this.activeindex = this.sizes.indexOf(item)
				console.log(JSON.stringify(this.sizes))
			},
			confimdelsize(item) {
				this.delitem = item
				this.showdeltip = true
			},
			delsize(delitem) {
				let i = this.sizes.findIndex(i => i == delitem);
				this.sizes.splice(i, 1)
			},
			delthis() {
				this.sizes = []
				this.title = ''
				this.hide = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hide {
		display: none;
	}

	.content {
		margin: 20rpx 20rpx;
	}

	.titlebox {
		position: relative;
	}

	.title {
		clear: both;
		font-size: 28rpx;
		color: #999;
		float: left;
	}

	.titleclose {
		color: #ff0000;
		position: absolute;
		right: -25rpx;
		top: -12rpx;
		font-size: 34rpx;
	}

	.items {
		clear: both;
	}

	.clear {
		clear: both;
	}

	.box {
		float: left;
	}

	.item {
		border: 1px solid #f2f2f2;
		font-size: 26rpx;
		color: #282828;
		padding: 4rpx 40rpx;
		background-color: #f2f2f2;
		text-align: center;
		margin: 10rpx 4rpx;
		position: relative;
	}

	.on {
		color: #e93323;
		background: #fff4f3;
		border-color: #e93323;
	}

	.name {}

	.close {
		color: #ff0000;
		position: absolute;
		right: -0rpx;
		top: -18rpx;
		font-size: 34rpx;
	}

	.inputsize {
		margin: 0rpx 30rpx;
	}
</style>
